﻿import QtQuick 2.9
import QtQuick.Controls 2.2

ComboBox {
    id:comboBox
    width: 330
    height:30

    onEnabledChanged: {
        if(enabled){
            contentText.color="#414141"
        }else{
            contentText.color="#A7A6AA"
        }
    }

    //ComboBox背景
    background: Rectangle {
        color: "#FFFFFF"
        border.color: "#DDDDDD"
        border.width: 1
        radius:4
    }
    //ComboBox字体
    contentItem: Text {
        id:contentText
        leftPadding: 10
        rightPadding: comboBox.indicator.width + comboBox.spacing

        text: comboBox.model[currentIndex]
        font.family: "黑体"
        font.pixelSize: 14
        color: "#414141"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignLeft
        elide: Text.ElideRight
    }
    //右侧指示器
    indicator:Canvas{
        id:canvas
        width: 12;height: 10
        anchors.right: comboBox.right
        anchors.rightMargin: 10
        anchors.verticalCenter: comboBox.verticalCenter
        onPaint:{
            var ctx = getContext("2d")
            ctx.reset();
            ctx.strokeStyle="#414141"
            ctx.translate(0.5, 0.5);
            ctx.beginPath()
            ctx.moveTo(2 ,2)
            ctx.lineTo(10 , 2)
            ctx.lineTo(6 , 8)
            ctx.closePath()
            ctx.fillStyle = "#414141"
            ctx.fill()
            ctx.stroke()

        }
    }

    //下拉项外边框
    popup: Popup {
        id:comboPopup
        y: comboBox.height-1
        width: comboBox.width
        contentHeight:{
            if(listView.implicitHeight<comboBox.height*5)
            {
                listView.implicitHeight
            }
            else
            {
                comboBox.height*5
            }
        }

        padding: 1
        clip:true
        background: Rectangle {
            anchors.fill: parent
            border.width: 1
            border.color:"#DDDDDD"
        }
        contentItem:ListView {
            id:listView
            clip: true   //让背景边框露出来
            implicitHeight: contentHeight
            model: comboBox.popup.visible ? comboBox.delegateModel : null
            snapMode:ListView.SnapToItem //滑动停留在顶部
            ScrollIndicator.vertical: ScrollIndicator { }  //滚动条
        }
    }
    //委托下拉项ListView
    delegate: ItemDelegate {
        id:itemDlgt
        height: comboBox.height
        width: comboBox.width
        contentItem:Rectangle{
            id:rectDlgt
            anchors.fill: parent
            color:{
                if(index===comboBox.currentIndex){
                    "#dddddd"
                }
                else
                {
                    itemDlgt.hovered?"#e5e5e5":"#f5f5f5";
                }
            }

            Text {
                anchors.fill: parent
                leftPadding: 9
                rightPadding: comboBox.indicator.width + comboBox.spacing
                text: modelData
                font.family: "黑体"
                font.pixelSize: 14
                color: "#414141"

                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignLeft
                elide: Text.ElideRight
            }
        }
        onPressed:  {
            comboBox.currentIndex=index;
        }

    }
}
